//const uglify=require('uglifyjs-webpack-plugin');
const htmlPlugin=require('html-webpack-plugin');
const extractPlugin=require('extract-text-webpack-plugin');
const purifyCSSPlugin = require("purifycss-webpack");
const copyWebpackPlugin=require('copy-webpack-plugin');
const path=require('path'); //使用path必须引入
//因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。
const glob = require('glob');
//引入webpack
const webpack=require('webpack');

//新建对象
const plugin={};
//配置
plugin.plugins=[
    //引入第三方类库插件,来自webpack本身,所以要引入webpack
    //注意:所有引入放入第三方类库都必须先安装
    new webpack.ProvidePlugin({
        //引入jquery
        $:"jquery", //获取 JQuery:"jquery", js中使用$ 或者JQuery即可
        //引入vue
        Vue:'vue/dist/vue.min.js'  //注意:直接引入vue无法使用
    }),
    //webpack自带压缩js插件
    //new uglify(),
    //html打包插件配置
    new htmlPlugin({
        //minify 的作用是对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false
        minify:{
            removeAttributeQuotes: true // 移除属性的引号
        },
        //hash选项的作用是 给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值。默认值为 false
        //这样就不会有缓存,影响开发
        hash:true,
        //需要打包的html文件
        template:'./src/index.html'
    }),
    //css分离插件    打包在dist下的文件路径
    new extractPlugin('/css/index.css'),
    new purifyCSSPlugin({
        //搜索html的路径,看那些css没有用到
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
    }),
    new webpack.BannerPlugin('侯征版权所有'),
    //集中打包静态资源
    new copyWebpackPlugin([{
        //要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中
        //因为这里是插件配置模块化,所以__dirname直接是daoconfig_mudule目录,暂时不知道怎么定位到src,如果是用这种[配置的话]
        from:__dirname+'/public',
        to:'./public'   //要打包到的文件夹路径，跟随output配置中的目录。所以不需要再自己加__dirname
    }])
];
module.exports=plugin;//抛出别的js需要引入放入对象